<template>
  <div class="shops-drawer">
    <el-drawer
      :title="
        $route.query.propertyUnitId ? getPropertyTypeName : getPropertyTypeName
      "
      :visible.sync="drawer"
      direction="rtl"
      :wrapperClosable="false"
      :modal-append-to-body="false"
      :show-close="false"
      size="30%"
    >
      <div class="shops-content">
        <el-form ref="form" :model="form" label-width="300px" size="small">
          <div class="add-property-content-scroll">
            <el-row>
              <el-col :span="15">
                <el-form-item label="编号：">
                  <el-input
                    v-model="form.propertyUnitCode"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="栋号："
                  v-if="
                    propertyTypeCode == 'property_type_zhengwuyongfang' ||
                    propertyTypeCode == 'property_type_wenhuajiaoyu' ||
                    propertyTypeCode == 'property_type_yiliaoweisheng' ||
                    propertyTypeCode == 'property_type_yanglaoyongfang' ||
                    propertyTypeCode == 'property_type_shequyongfang' ||
                    propertyTypeCode == 'property_type_shuilijichusheshi' ||
                    propertyTypeCode == 'property_type_huanweisheshi' ||
                    propertyTypeCode == 'property_type_chaiqianwccfangchan'
                  "
                >
                  <el-input
                    v-model="form.dongCode"
                    placeholder="请输入"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="车位（个）："
                  v-if="
                    propertyTypeCode == 'property_type_tingchechang' ||
                    propertyTypeCode == 'property_type_chewei'
                  "
                >
                  <el-input
                    v-model="form.parkingSpotNum"
                    placeholder="请输入"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="管理单位：">
                  <div>
                    {{
                      propertyinfoStorage && propertyinfoStorage.manageDeptName
                    }}
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="总建筑面积（㎡）：">
                  <el-input
                    v-model.number="form.buildingAreaTotal"
                    placeholder="请输入"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="证载面积（㎡）：">
                  <el-input
                    v-model="form.registerArea"
                    placeholder="请输入"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20" class="quanType">
                <div>权证情况：</div>
                <el-form-item
                  label="权证类型："
                  style="
                    display: flex;
                    align-items: center;
                    color: #88909b;
                    margin-top: 6px;
                  "
                >
                  <el-radio-group v-model="flag" @change="radioChange">
                    <el-radio :label="1">不动产权证</el-radio>
                    <el-radio :label="0">房产证+土地证</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="22" class="upload-quanz">
                <div v-if="flag === 1">
                  <div class="fcz">
                    <p style="color: #606266; font-size: 14px">不动产权证</p>
                    <el-input
                      style="width: 30%; margin: 0 15px"
                      size="mini"
                      v-model="form.immovablePropertyCertificateCode"
                    />
                    <el-upload
                      class="upload-demo"
                      action="/admin/common/upload"
                      :headers="headersAuthorization"
                      :on-success="
                        (response, file, fileList) =>
                          handleBDCSuccess(response, file, fileList)
                      "
                      :on-remove="
                        (file, fileList) => handleRemove(file, fileList, 'bdc')
                      "
                      multiple
                      :limit="3"
                      :file-list="realEstateList"
                    >
                      <el-button size="mini" type="primary"
                        >上传图片/附件</el-button
                      >
                    </el-upload>
                  </div>
                </div>

                <div v-else-if="flag === 0">
                  <el-checkbox-group v-model="checkList">
                    <div class="fcz">
                      <el-checkbox label="房产证"></el-checkbox>
                      <div
                        class="upload-info"
                        v-show="checkList.includes('房产证')"
                      >
                        <el-input
                          v-model="form.houseOwnershipCertificateCode"
                          style="width: 50%; margin: 0 15px"
                          size="mini"
                        />
                        <el-upload
                          class="upload-demo"
                          action="/admin/common/upload"
                          :headers="headersAuthorization"
                          :on-success="
                            (response, file, fileList) =>
                              handleFDCSuccess(response, file, fileList)
                          "
                          :on-remove="
                            (file, fileList) =>
                              handleRemove(file, fileList, 'fdc')
                          "
                          multiple
                          :limit="3"
                          :file-list="propertyCertificateList"
                        >
                          <el-button size="mini" type="primary"
                            >上传图片/附件</el-button
                          >
                        </el-upload>
                      </div>
                    </div>
                    <div class="tdz">
                      <el-checkbox label="土地证"></el-checkbox>
                      <div
                        class="upload-info"
                        v-show="checkList.includes('土地证')"
                      >
                        <el-input
                          v-model="form.landCertificateCode"
                          style="width: 50%; margin: 0 15px"
                          size="mini"
                        />
                        <el-upload
                          class="upload-demo"
                          action="/admin/common/upload"
                          :headers="headersAuthorization"
                          :on-success="
                            (response, file, fileList) =>
                              handleTDZSuccess(response, file, fileList)
                          "
                          :on-remove="
                            (file, fileList) =>
                              handleRemove(file, fileList, 'tdz')
                          "
                          multiple
                          :limit="3"
                          :file-list="landCertificateList"
                        >
                          <el-button size="mini" type="primary"
                            >上传图片/附件</el-button
                          >
                        </el-upload>
                      </div>
                    </div>
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="信息描述：">
                  <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="form.punitInfo"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-form-item class="opt-cla">
            <el-button type="primary" @click="addUnitClick">
              <template v-if="$route.query.propertyUnitId"> 编辑 </template>
              <template v-else>添加</template></el-button
            >
            <el-button @click="cancel()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  addNobusiness,
  editNobusiness,
  detailBasePropertyUnit,
} from "@/api/shops";
import { getToken } from "@/utils/auth";
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    propertyObj: {
      type: Object,
    },
    propertyTypeId: {},
    propertyTypeCode: {
      type: String,
    },
  },
  data() {
    return {
      form: {
        propertyUnitCode: undefined, // 资产单元编号
        dongCode: undefined, // 栋号
        parkingSpotNum: undefined, //车位
        punitInfo: undefined, //资产信息描述
        buildingAreaTotal: undefined, //总建筑面积（平方米）
        registerArea: undefined, //证载面积（平方米）
        immovablePropertyCertificateAttachIds: undefined, //不动产权证附件 附件ID
        houseOwnershipCertificateAttachIds: undefined, //房产证附件 附件ID
        landCertificateAttachIds: undefined, //土地证附件 附件ID
        immovablePropertyCertificateCode: undefined, //不动产权证号
        houseOwnershipCertificateCode: undefined, //房产证号
        landCertificateCode: undefined, //土地证号
        immovablePropertyWarrantFlag: 1,
        houseOwnershipWarrantFlag: 0,
        landCertificateWarrantFlag: 0,
      },
      realEstateList: [], // 不动产权证
      propertyCertificateList: [], // 房产证
      landCertificateList: [], // 土地证
      flag: 1, // 默认是不动产权证
      checkList: [],
      propertyinfoStorage: null,
      tableData: [
        {
          layer: "",
          height: "",
        },
      ],
      options: [
        {
          label: "有",
          value: 1,
        },
        {
          label: "无",
          value: 0,
        },
      ],
      levelOptions: [
        {
          label: "甲",
        },
        {
          label: "乙",
        },
        {
          label: "丙",
        },
        {
          label: "丁",
        },
        {
          label: "戊",
        },
      ],
      headersAuthorization: null,
    };
  },
  computed: {
    getPropertyTypeName() {
      let propertyTypeName = "";
      if (this.propertyTypeCode == "property_type_zhengwuyongfang") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑政务用房";
        } else {
          propertyTypeName = "添加政务用房";
        }
      } else if (this.propertyTypeCode == "property_type_wenhuajiaoyu") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑文化教育";
        } else {
          propertyTypeName = "添加文化教育";
        }
      } else if (this.propertyTypeCode == "property_type_yiliaoweisheng") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑医疗卫生";
        } else {
          propertyTypeName = "添加医疗卫生";
        }
      } else if (this.propertyTypeCode == "property_type_yanglaoyongfang") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑养老用房";
        } else {
          propertyTypeName = "添加养老用房";
        }
      } else if (this.propertyTypeCode == "property_type_shequyongfang") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑社区用房";
        } else {
          propertyTypeName = "添加社区用房";
        }
      } else if (this.propertyTypeCode == "property_type_shuilijichusheshi") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑水利基础设施";
        } else {
          propertyTypeName = "添加水利基础设施";
        }
      } else if (this.propertyTypeCode == "property_type_huanweisheshi") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑环卫设施";
        } else {
          propertyTypeName = "添加环卫设施";
        }
      } else if (this.propertyTypeCode == "property_type_tingchechang") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑停车场";
        } else {
          propertyTypeName = "添加停车场";
        }
      } else if (this.propertyTypeCode == "property_type_chewei") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑车位";
        } else {
          propertyTypeName = "添加车位";
        }
      } else if (this.propertyTypeCode == "property_type_chaiqianwccfangchan") {
        if (this.$route.query.propertyUnitId) {
          propertyTypeName = "编辑拆迁（未拆除）房产";
        } else {
          propertyTypeName = "添加拆迁（未拆除）房产";
        }
      }
      return propertyTypeName;
    },
  },
  watch: {
    propertyObj: {
      handler(val) {
        // 查看详情
        if (val && val.propertyUnitId) {
          detailBasePropertyUnit(val.propertyUnitId).then((res) => {
            this.form = Object.assign({}, res.data);
            // 不动产权证
            if (
              res.data.immovablePropertyCertificateAttachList &&
              res.data.immovablePropertyCertificateAttachList.length > 0
            ) {
              this.flag = 1;
              this.realEstateList =
                res.data.immovablePropertyCertificateAttachList.map((v) => {
                  return {
                    name: v.originalAttName,
                    url: v.attUrl,
                  };
                });
            } else {
              this.flag = 0;
              this.realEstateList = undefined;
            }

            // 房产证
            if (
              res.data.houseOwnershipCertificateAttachList &&
              res.data.houseOwnershipCertificateAttachList.length > 0
            ) {
              this.flag = 0;
              this.checkList.push("房产证");
              this.propertyCertificateList =
                res.data.houseOwnershipCertificateAttachList.map((v) => {
                  return {
                    name: v.originalAttName,
                    url: v.attUrl,
                  };
                });
            } else {
              this.flag = 1;
              this.propertyCertificateList = undefined;
              let index = this.checkList.indexOf("房产证");
              if (index !== -1) {
                this.checkList.splice(index, 1);
              }
            }

            // 土地证
            if (
              res.data.landCertificateAttachList &&
              res.data.landCertificateAttachList.length > 0
            ) {
              this.flag = 0;
              this.checkList.push("土地证");
              this.landCertificateList = res.data.landCertificateAttachList.map(
                (v) => {
                  return {
                    name: v.originalAttName,
                    url: v.attUrl,
                  };
                }
              );
            } else {
              this.flag = 1;
              this.landCertificateList = undefined;
              let index = this.checkList.indexOf("土地证");
              if (index !== -1) {
                this.checkList.splice(index, 1);
              }
            }
          });
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.propertyinfoStorage = JSON.parse(
        localStorage.getItem("propertyinfo")
      );
      this.init();
    });
  },
  methods: {
    clear() {
      this.form = {
        propertyUnitCode: undefined, // 资产单元编号
        dongCode: undefined, // 栋号
        punitInfo: undefined, //资产信息描述
        buildingAreaTotal: undefined, //总建筑面积（平方米）
        registerArea: undefined, //证载面积（平方米）
        immovablePropertyCertificateAttachIds: undefined, //不动产权证附件 附件ID
        houseOwnershipCertificateAttachIds: undefined, //房产证附件 附件ID
        landCertificateAttachIds: undefined, //土地证附件 附件ID
        immovablePropertyCertificateCode: undefined, //不动产权证号
        houseOwnershipCertificateCode: undefined, //房产证号
        landCertificateCode: undefined, //土地证号
        immovablePropertyWarrantFlag: 1,
        houseOwnershipWarrantFlag: 0,
        landCertificateWarrantFlag: 0,
      };
      this.realEstateList = []; // 不动产权证
      this.propertyCertificateList = []; // 房产证
      this.landCertificateList = []; // 土地证
      this.flag = 1; // 默认是不动产权证
      this.checkList = [];
    },
    cancel() {
      this.$emit("update:drawer", false);
      this.clear();
    },

    init() {
      // 获取用于上传的token
      this.headersAuthorization = {
        Authorization: "Bearer " + getToken(),
      };
    },
    handleRemove(file, fileList, type) {
      switch (type) {
        // 不动产权证
        case "bdc":
          let bdcTarget = fileList.map((item) => item.response.data.attId);
          if (bdcTarget.length > 0) {
            this.form.immovablePropertyCertificateAttachIds =
              bdcTarget.join(",");
          } else {
            this.form.immovablePropertyCertificateAttachIds = "";
          }
          break;
        // 房产证
        case "fcz":
          let fczTarget = fileList.map((item) => item.response.data.attId);
          if (fczTarget.length > 0) {
            this.form.houseOwnershipCertificateAttachIds = fczTarget.join(",");
          } else {
            this.form.houseOwnershipCertificateAttachIds = "";
          }
          break;
        // 土地证
        case "tdz":
          let tdzTarget = fileList.map((item) => item.response.data.attId);
          if (tdzTarget.length > 0) {
            this.form.landCertificateAttachIds = tdzTarget.join(",");
          } else {
            this.form.landCertificateAttachIds = "";
          }
          break;
      }
    },
    // 不动产权证
    handleBDCSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }

      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.form.immovablePropertyCertificateAttachIds = target.join(",");
      }
    },

    // 房产证
    handleFDCSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }

      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.form.houseOwnershipCertificateAttachIds = target.join(",");
      }
    },

    // 土地证
    handleTDZSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }

      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.form.landCertificateAttachIds = target.join(",");
      }
    },
    // 权证情况
    radioChange(e) {
      if (e === 1) {
        // 不动产权证
        this.form.immovablePropertyWarrantFlag = 1;
        this.form.houseOwnershipWarrantFlag = 0;
        this.form.landCertificateWarrantFlag = 0;
        this.form.houseOwnershipCertificateAttachIds = undefined;
        this.form.landCertificateAttachIds = undefined;
        this.form.houseOwnershipCertificateCode = undefined;
        this.form.landCertificateCode = undefined;
        if (this.$route.query.propertyUnitId) {
          // 表示编辑的情况
          // 清空房产证、土地证
          this.form.houseOwnershipCertificateAttachList = undefined;
          this.form.landCertificateAttachList = undefined;
        }
      } else if (e === 0) {
        // 房产证+土地证
        this.form.immovablePropertyWarrantFlag = 0;
        this.form.immovablePropertyCertificateAttachIds = undefined;
        this.form.immovablePropertyCertificateAttachList = undefined;
        this.form.immovablePropertyCertificateCode = undefined;
      }
    },

    // 新增or编辑
    addUnitClick() {
      if (!this.form.propertyUnitCode) {
        this.$message.error("请输入编号");
        return;
      }

      if (!this.form.dongCode) {
        this.$message.error("请输入栋号");
        return;
      }

      if (!this.form.buildingAreaTotal) {
        this.$message.error("请输入总建筑面积");
        return;
      }

      if (!this.form.registerArea) {
        this.$message.error("请输入证载面积");
        return;
      }

      if (this.$route.query.propertyUnitId) {
        this.form.propertyUnitId = this.$route.query.propertyUnitId;
        editNobusiness(this.form)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("编辑成功");
              this.$emit("update:drawer", false);
              this.clear();
              this.$emit("childFeijyUnitEvent");
            }
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });

        // 编辑
      } else {
        // 新增
        let params = {
          propertyId: this.propertyinfoStorage.propertyId,
          propertyTypeId: this.propertyTypeId,
          ...this.form,
        };
        addNobusiness(params)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.$emit("update:drawer", false);
              this.clear();
              this.$emit("childFeijyUnitEvent");
            }
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.shops-drawer {
  .upload-quanz {
    width: 90%;
    height: 120px;
    background: #fafafa;
    font-size: 14px;
    .fcz {
      display: flex;
      align-items: baseline;
      margin: 15px 0 15px 15px;
    }
    .tdz {
      display: flex;
      align-items: baseline;
      margin: 0 0 0 15px;
    }
  }
  .smart-remind-content {
    .smart-btn {
      @include searchBtn;
      margin-top: 50px;
      margin-left: 25px;
    }
  }
  .upload-info {
    display: flex;
    align-items: center;
  }
}
</style>

<style lang="scss">
.shops-drawer {
  .el-drawer__header {
    background-color: #fafafa;
    padding: 0;
    color: #000;
    margin-bottom: 5px;
  }
  .el-drawer__body {
    overflow-y: auto;
  }
  .el-form-item__label {
    color: #000;
  }
  header#el-drawer__title {
    padding: 10px;
  }
  .el-form-item__content {
    display: contents;
  }
  .el-col {
    margin-left: 20px;
  }
  .el-form-item__label {
    text-align: left;
  }
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  .opt-cla {
    margin: 20px;
    .el-button--default,
    .el-button--primary {
      width: 95px;
      height: 32px;
      padding: 0;
    }
  }
}
</style>
